import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import ClassNames from 'classnames';
import RenderJudge from '@/components/RenderJudge';
import Iconfont from '@/components/Iconfont';
import Image from '@/components/Image';
import DefaultLiveCoverImage from '@/assets/images/default_live_cover_image.jpg';
import DefaultUserImage from '@/assets/images/default_user_image.png';
import FootballPlayIcon from '@/assets/images/football_play_icon.png';
import BasketballPlayIcon from '@/assets/images/basketball_play_icon.png';
import DefaultPlayIcon from '@/assets/images/default_play_icon.png';
import LiveRecommendIcon from '@/assets/images/live_recommend_icon.png';

import styles from './style.scss';

const VideoCard = ({
  className,
  style,
  label,
  image,
  defaultImage,
  playing,
  url,
  headImage,
  userName,
  heat,
  sportId,
  children,
  isRecommend,
}) => {
  const Element = url ? Link : 'div';

  const getLivePlayIcon = useMemo(() => {
    if (/^1$/.test(sportId)) return FootballPlayIcon;
    if (/^2$/.test(sportId)) return BasketballPlayIcon;

    return DefaultPlayIcon;
  }, [sportId]);

  return (
    <Element to={url} className={ClassNames(styles.container, className)} style={style}>
      <div className={styles.imageWrapper}>
        <Image
          className={styles.image}
          src={image}
          defaultImage={defaultImage}
          alt={label}
        />
        <RenderJudge
          value={playing}
          active={(
            <img className={styles.playStatus} src={getLivePlayIcon} />
          )}
        />
        <RenderJudge
          value={isRecommend === 1}
          active={(
            <img className={styles.recommendIcon} src={LiveRecommendIcon} />
          )}
        />
        <div className={styles.infos}>
          <Image className={styles.userImage} src={headImage} defaultImage={DefaultUserImage} />
          <div className={styles.userName}>{userName}</div>
          <Iconfont className={styles.heatIcon} name="huo" />
          <div className={styles.heatTxt}>{heat || 0}</div>
        </div>
      </div>
      <div className={styles.title}>{label}</div>
      {children}
    </Element>
  );
};

VideoCard.defaultProps = {
  playing: false,
  defaultImage: DefaultLiveCoverImage,
};

export default VideoCard;
